import React, { useState, useEffect } from 'react';
import styles from './index.less';
import { FileSearchOutlined } from '#/utils/antdIcons';
import { Modal } from 'antd';
import SecurityModal from '../SecurityModal';
import { ModuleHeader } from '../index';
import { getSecurityData, getSecurityModalData } from '@/services/businessAnalysis';
import { HttpCode } from '#/utils/contacts.js';
import PropTypes from 'prop-types';
const TAG_ARRAY = {
  first: { name: '一类', color: '#F92424' },
  second: { name: '二类', color: '#FB5D2B' },
  third: { name: '三类', color: '#FB8A05' },
  other: { name: '其他', color: '#FBB605' },
};

const FIST_ARRAY = [{ type: 'equipmentAccidentBody', title: '设备事故', index: 0 }];
const RIGHT_ARRAY = [
  { type: 'personAccident', title: '人身事故', index: 1 },
  { type: 'fireAccident', title: '火灾事故', index: 2 },
  { type: 'trafficAccident', title: '交通事故', index: 3 },
];

const security = (props) => {
  const [modalTitle, setModalTitle] = useState('');
  const [modalLoading, setModalLoading] = useState(false);
  const [securityble, setSecurityble] = useState(false);
  const [securityData, setsecurityData] = useState({});
  const [securityModalList, setsecurityModalList] = useState([]);

  useEffect(() => {
    _getSecurityData();
  }, [props.dateObj, props.type]);

  let _getSecurityData = async () => {
    //安全数据
    const { dateObj, type } = props;
    let res = await getSecurityData({
      endDate: dateObj.endDate,
      startDate: dateObj.startDate,
      type,
    });
    if (res && res.statusCode === HttpCode.SUCCESS) {
      setsecurityData(res);
    }
  };

  let handleOk = async (item, tagName) => {
    //安全弹框
    if (modalLoading) return;
    setModalLoading(true);
    const { dateObj, type } = props;
    let res = await getSecurityModalData({
      accidentType: item,
      endDate: dateObj.endDate,
      startDate: dateObj.startDate,
      type,
    }).catch(() => setModalLoading(false));
    if (res && res.statusCode === HttpCode.SUCCESS) {
      if (tagName) {
        // 等级分类查看
        res.tAppSafetyAccidentList = res.tAppSafetyAccidentList.filter(
          (z) => z.accidentGrade.indexOf(tagName) > -1,
        );
      }
      setsecurityModalList(res);
      setSecurityble(true);
      setModalTitle(item);
    }
    setModalLoading(false);
  };

  let handleCancel = () => {
    setSecurityble(false);
    setModalTitle('');
  };

  const { saveDayCounts } = securityData && securityData;
  let saveDayCountsSpilt = saveDayCounts && String(saveDayCounts).split('');
  return (
    <div className={styles.securityBox}>
      <ModuleHeader title="安全">
        <div className={styles.textTwo}>
          安全运行
          {saveDayCountsSpilt && saveDayCountsSpilt.map((item) => <span key={item}>{item}</span>)}
          <i style={{ marginLeft: '10px', fontStyle: 'normal' }}>天</i>
        </div>
      </ModuleHeader>
      <div className={styles.card}>
        <div className={styles.left}>
          {FIST_ARRAY.map((n) => {
            const item = securityData[n.type] || {};
            const hasNumber = Object.values(item).filter((n) => n > 0).length;
            return (
              <div key={n.index}>
                <div
                  className={styles.titlebox}
                  onClick={() => {
                    if (hasNumber) {
                      handleOk(n.title);
                    }
                  }}
                >
                  <span>{n.title}</span>
                  {hasNumber ? (
                    <span className={styles.icon}>
                      <FileSearchOutlined />
                    </span>
                  ) : null}
                </div>
                <div className={styles.blockContRow}>
                  {!hasNumber ? <div className={styles.zero}>0</div> : null}
                  {hasNumber > 0 &&
                    Object.keys(item)
                      .filter((lvKey) => item[lvKey] > 0)
                      .map((lvKey, index) => {
                        const tagName = TAG_ARRAY[lvKey].name || TAG_ARRAY.other.name;
                        const tagColor = TAG_ARRAY[lvKey].color || TAG_ARRAY.other.color;
                        return (
                          <div
                            key={n.type + lvKey + index}
                            className={styles.coltag}
                            onClick={() => {
                              if (hasNumber) {
                                handleOk(n.title, tagName);
                              }
                            }}
                          >
                            <div className={styles.zero}>{item[lvKey]}</div>
                            <span className={styles.tag} style={{ color: tagColor }}>
                              {tagName}
                            </span>
                          </div>
                        );
                      })}
                </div>
              </div>
            );
          })}
        </div>
        <div className={styles.right}>
          {RIGHT_ARRAY.map((n) => {
            let item = securityData[n.type];
            const isNumber = parseFloat(item).toString() !== 'NaN';
            const hasNumber = isNumber ? 0 : Object.values(item || {}).filter((n) => n > 0).length;
            return (
              <div
                key={n.index}
                style={{ flex: 1 }}
                onClick={() => {
                  if ((isNumber && item > 0) || hasNumber) {
                    handleOk(n.title);
                  }
                }}
              >
                <div className={styles.titlebox}>
                  <span>{n.title}</span>
                  {(isNumber && item > 0) || hasNumber ? (
                    <span className={styles.icon}>
                      <FileSearchOutlined />
                    </span>
                  ) : null}
                </div>
                <div className={styles.blockContRow}>
                  {!hasNumber ? <div className={styles.zero}>{item || 0}</div> : null}
                  {hasNumber > 0 &&
                    Object.keys(item || {})
                      .filter((n) => item[n] > 0)
                      .map((n, index) => {
                        return (
                          <div key={n.type + n + index} className={styles.coltag}>
                            <div className={styles.zero}>{item[n]}</div>
                            <span className={styles.tag}>{TAG_ARRAY[n] || TAG_ARRAY.other}</span>
                          </div>
                        );
                      })}
                </div>
              </div>
            );
          })}
        </div>
      </div>
      <Modal
        visible={securityble}
        footer={null}
        closable={false}
        width={800}
        destroyOnClose
        centered
      >
        <SecurityModal
          handleCancel={handleCancel}
          securityModalList={securityModalList}
          title={modalTitle}
        />
      </Modal>
    </div>
  );
};

security.propTypes = {
  dateObj: PropTypes.object,
  handleClose: PropTypes.func,
  type: PropTypes.string,
};

export default security;
